import React, { useState } from "react";
import {
  Box,
  AppBar,
  Toolbar,
  Typography,
  IconButton,
  Stack,
} from "@mui/material";
import GroupsIcon from "@mui/icons-material/Groups";
import MessageList from "./MessageList";
import MessageInput from "./MessageInput";
import MemberList from "./MemberList";

interface ChatGroupProps {
  roomId: string;
  roomName: string;
}

const ChatGroup: React.FC<ChatGroupProps> = ({ roomId, roomName }) => {
  const [showMembers, setShowMembers] = useState(true);

  return (
    <Box sx={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      {/* TOP */}
      <AppBar position="static" color="default" elevation={1}>
        <Stack
          direction="row"
          justifyContent="space-between"
          alignItems="center"
          sx={{ mx: 2 }}
        >
          <Typography variant="h6" component="div">
            {roomName}
          </Typography>
          <IconButton
            color={showMembers ? "primary" : "default"}
            onClick={() => setShowMembers(!showMembers)}
            aria-label="toggle members"
          >
            <GroupsIcon />
          </IconButton>
        </Stack>
      </AppBar>

      <Box sx={{ display: "flex", flexGrow: 1, overflow: "hidden" }}>
        <Box
          sx={{
            flexGrow: 1,
            display: "flex",
            flexDirection: "column",
            height: "100%",
            overflow: "hidden",
          }}
        >
          <MessageList roomId={roomId} />
          <MessageInput roomId={roomId} />
        </Box>

        {/* メンバー一覧 */}
        {showMembers && <MemberList roomId={roomId} />}
      </Box>
    </Box>
  );
};

export default ChatGroup;
